<template>
	<view class="page">
		<view class="background-view"> </view>
		<view class="userInfo-box">
			<image class="userImage" src="@/static/5.png"></image>
			<view class="user-text">
				<view class="view-item text-overflow">小鸡仔被狗追啦</view>
				<view class="view-item text-overflow">
					<text>关注&nbsp;0</text>&nbsp;&nbsp;
					<text>粉丝&nbsp;0</text>
				</view>
			</view>
			<view class="config flex-center">
				<uni-icons type="info" size="30" color="white"></uni-icons>
				<uni-icons type="sound" size="30" color="white" style="margin: 0 15rpx;"></uni-icons>
				<uni-icons type="gear" size="30" color="white"></uni-icons>
			</view>
		</view>
		<view class="user-member">
			<view class="first">
				<view class="first-member-center1">会员中心</view>
				<view class="first-member-center2">观影金&nbsp;36</view>
			</view>
			<view class="second">
				<view class="second-member-upgrade1">加油升级</view>
				<view class="second-member-upgrade2">
					<text>再积174经验值可升级</text>
					<text><uni-icons type="forward" size="30" color="black"></uni-icons></text>
				</view>
			</view>
		</view>
		<view class="list-box2">
			<view class="box">
				<!-- <view class="box-title">
					<view class="text1">我的服务</view>
				</view> -->
				<view class="box-content">
					<view v-for="(item, index) in list3" :key="index" class="item" @click="skipMethod(item.pathUrl)">
						<view class="item1 flex-center">
							<image :src="item.imgPath"></image>
						</view>
						<view class="item2 text-overflow flex-center">
							{{ item.imgText }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="list-box1">
			<view class="box">
				<view class="box-title">
					<view class="text1">我的优惠</view>
				</view>
				<view class="box-content">
					<view v-for="(item, index) in list1" :key="index" class="item" @click="skipMethod(item.pathUrl)">
						<view class="item1 flex-center">
							<image :src="item.imgPath"></image>
						</view>
						<view class="item2 text-overflow flex-center">
							{{ item.imgText }}
						</view>
						<view class="item3 flex-center">
							{{ item.notes }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="list-box3">
			<view class="box">
				<view class="box-title">
					<view class="text1">我的记录</view>
				</view>
				<view class="box-content">
					<view class="left">
						<view class="left-1">
							<image src="../../static/myIcon/ying1.png"></image>
						</view>
						<view class="left-2">
							<view class="one">想看</view>
							<view class="two">共1部</view>
							<view class="three"></view>
						</view>
					</view>
					<view class="right">
						<view class="right-1">
							<image src="../../static/myIcon/ying2.png"></image>
						</view>
						<view class="right-2">
							<view class="one">看过</view>
							<view class="two">共4部</view>
							<view class="three">3部待评价</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="list-box">
			<view class="box">
				<view class="box-title">
					<view class="text1">我的服务</view>
				</view>
				<view class="box-content">
					<view v-for="(item, index) in list2" :key="index" class="item" @click="skipMethod(item.imgText)">
						<view class="item1 flex-center">
							<image :src="item.imgPath" style="width: 45rpx;height: 45rpx;"></image>
						</view>
						<view class="item2 text-overflow flex-center">
							{{ item.imgText }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss" scoped>
	.page {
		position: relative;
		height: 100vh;
		background-color: #f2f2f2;
		animation: text linear 0.4s;
	}

	.background-view {
		height: 30%;
		margin-bottom: 70rpx;
		background-color: #3cb79a;
		// border-bottom-left-radius: 50%;
		// border-bottom-right-radius: 50%;
	}

	@keyframes text {
		0% {
			transform: translate(-100%, 0);
		}

		100% {
			transform: translate(0, 0);
		}
	}



	.userInfo-box {
		top: 6%;
		position: absolute;
		width: 80%;
		left: 50%;
		transform: translate(-50%, 0);
		height: 120rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		flex-wrap: wrap;

		.userImage {
			width: 20%;
			height: 100%;
			border-radius: 50%;
			box-shadow: 0px 5px 10px black;
		}

		.user-text {
			width: 47%;
			color: white;
			font-size: 1em;

			.view-item {
				margin-left: 20rpx;
				line-height: 2;
			}
		}

		.config {
			width: 33%;
			overflow: hidden;
			height: 100%;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.user-member {
		top: 23%;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		width: 85%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: white;
		border-radius: 40rpx;

		.first {
			width: 25%;
			border-right: 2rpx solid black;

			.first-member-center1 {
				color: #f99e20;
			}

			.first-member-center2 {
				color: #a0a0a0;
			}
		}

		.second {
			width: 70%;
		}
	}

	.user-info-card {
		top: 40%;
		position: absolute;
		width: 85%;
		left: 50%;
		transform: translate(-50%, 0);
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 30rpx;
		background-color: white;
		border-radius: 40rpx;
		box-shadow: 0rpx 1rpx 2rpx #e3e3e3;

		.item {
			width: 35%;
			display: flex;
			align-items: center;
			flex-direction: column;
			height: 100%;

			.item-1 {
				color: #bdbdbd;
				font-size: 1.2em;
				width: 100%;
				text-align: center;
			}

			.item-2 {
				text-align: center;
				width: 100%;
				margin-top: 10rpx;
			}
		}
	}

	.text-overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.list-box2 {
		// height: 380rpx;
		padding: 30rpx;
		margin-top: 100rpx;

		// background-color: lightgreen;

		.box {
			background-color: white;
			width: 100%;
			height: 90%;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			box-shadow: 0px 1px 2px #e3e3e3;

			.box-title {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #d8d8d8;

				.text1 {
					font-size: 1.3em;
					text-indent: 1em;
				}

				.text2 {
					color: #d8d8d8;
					font-size: 1.2em;
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					image {
						margin-left: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.box-content {
				height: 60%;
				padding: 20rpx 40rpx 40rpx 40rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 20rpx;
					height: 100%;

					.item1 {
						height: 50%;
						width: 100%;
						text-align: center;

						image {
							width: 65rpx;
							height: 65rpx;
						}
					}

					.item2 {
						height: 50%;
						width: 100%;
						font-size: 1em;
					}
				}
			}
		}
	}

	.list-box1 {
		// height: 380rpx;
		padding: 30rpx;
		margin-top: -20rpx;

		// background-color: lightgreen;

		.box {
			background-color: white;
			width: 100%;
			height: 90%;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			box-shadow: 0rpx 1rpx 2rpx #e3e3e3;

			.box-title {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #d8d8d8;

				.text1 {
					font-size: 1.3em;
					text-indent: 1em;
				}

				.text2 {
					color: #d8d8d8;
					font-size: 1.2em;
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					image {
						margin-left: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.box-content {
				height: 60%;
				padding: 20rpx 40rpx 40rpx 40rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 20rpx;
					height: 100%;

					.item1 {
						height: 33%;
						width: 100%;
						text-align: center;

						image {
							width: 65rpx;
							height: 65rpx;
						}
					}

					.item2 {
						height: 33%;
						width: 100%;
						font-size: 1em;
					}

					.item3 {
						height: 33%;
						width: 100%;
						font-size: 0.65em;
						color: #999999;
					}
				}
			}
		}
	}

	.list-box3 {
		// height: 380rpx;
		padding: 30rpx;
		margin-top: -20rpx;

		// background-color: lightgreen;

		.box {
			background-color: white;
			width: 100%;
			height: 90%;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			box-shadow: 0px 1px 2px #e3e3e3;

			.box-title {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2px solid #d8d8d8;

				.text1 {
					font-size: 1.3em;
					text-indent: 1em;
				}

				.text2 {
					color: #d8d8d8;
					font-size: 1.2em;
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					image {
						margin-left: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.box-content {
				height: 60%;
				padding: 20rpx 40rpx 20rpx 40rpx;
				display: flex;
				justify-content: space-between;

				.left {
					width: 50%;
					display: flex;
					justify-content: space-between;

					.left-1 {
						width: 50%;

						image {
							width: 130rpx;
							height: 160rpx;
						}
					}

					.left-2 {
						width: 50%;

						.one {
							font-weight: bold;
						}

						.two {
							color: #666666;
						}

						.three {
							color: #f99e61;
						}
					}
				}

				.right {
					width: 50%;
					display: flex;
					justify-content: space-between;

					.right-1 {
						width: 50%;

						image {
							width: 130rpx;
							height: 160rpx;
						}
					}

					.right-2 {
						width: 50%;

						.one {
							font-weight: bold;
						}

						.two {
							color: #666666;
						}

						.three {
							color: #f99e61;
						}
					}
				}
			}
		}
	}

	.list-box {
		// height: 380rpx;
		padding: 30rpx;
		margin-top: -25rpx;

		// background-color: lightgreen;

		.box {
			background-color: white;
			width: 100%;
			height: 90%;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			box-shadow: 0px 1px 2px #e3e3e3;

			.box-title {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2px solid #d8d8d8;

				.text1 {
					font-size: 1.3em;
					text-indent: 1em;
				}

				.text2 {
					color: #d8d8d8;
					font-size: 1.2em;
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					image {
						margin-left: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.box-content {
				height: 60%;
				padding: 20rpx 40rpx 40rpx 40rpx;
				display: flex;
				justify-content: start;
				flex-wrap: wrap;

				.item {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 20rpx;
					height: 100%;

					.item1 {
						height: 50%;
						width: 100%;
						text-align: center;

						image {
							width: 65rpx;
							height: 65rpx;
						}
					}

					.item2 {
						height: 50%;
						width: 100%;
						font-size: .8em;
					}
				}
			}
		}
	}

	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

<script>
	//import {  } from "@/common/api/{$}.js";
	export default {
		data() {
			return {
				list1: [{
						// 图片路径
						imgPath: "../../static/myIcon/1-1.png",
						// 图片文字
						imgText: "优惠券",
						// 备注
						notes: "共1张",
						// 此区域点击跳转的页面
						pathUrl: "1",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/1-2.png",
						// 图片文字
						imgText: "权益卡",
						// 备注
						notes: "开卡购票更优惠",
						// 此区域点击跳转的页面
						pathUrl: "2",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/1-3.png",
						// 图片文字
						imgText: "乐影卡",
						// 备注
						notes: "",
						// 此区域点击跳转的页面
						pathUrl: "3",
					},
				],
				list2: [{
						// 图片路径
						imgPath: "../../static/myIcon/2-1.png",
						// 图片文字
						imgText: "影票查验",
						// 此区域点击跳转的页面
						pathUrl: "1",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/2-2.png",
						// 图片文字
						imgText: "我的小聚场",
						// 此区域点击跳转的页面
						pathUrl: "2",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/2-3.png",
						// 图片文字
						imgText: "发起的讨论",
						// 此区域点击跳转的页面
						pathUrl: "3",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/2-4.png",
						// 图片文字
						imgText: "我的收藏",
						// 此区域点击跳转的页面
						pathUrl: "4",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/2-5.png",
						// 图片文字
						imgText: "播放记录",
						// 此区域点击跳转的页面
						pathUrl: "5",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/2-6.png",
						// 图片文字
						imgText: "银行特惠",
						// 此区域点击跳转的页面
						pathUrl: "6",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/2-7.png",
						// 图片文字
						imgText: "阿里众筹鱼",
						// 此区域点击跳转的页面
						pathUrl: "7",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/2-8.png",
						// 图片文字
						imgText: "娱乐宝",
						// 此区域点击跳转的页面
						pathUrl: "8",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/2-9.png",
						// 图片文字
						imgText: "3小时公益",
						// 此区域点击跳转的页面
						pathUrl: "9",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/2-10.png",
						// 图片文字
						imgText: "我的客服",
						// 此区域点击跳转的页面
						pathUrl: "10",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/2-11.png",
						// 图片文字
						imgText: "满意度调查",
						// 此区域点击跳转的页面
						pathUrl: "11",
					},
				],
				list3: [{
						// 图片路径
						imgPath: "../../static/myIcon/3-1.png",
						// 图片文字
						imgText: "电影票",
						// 此区域点击跳转的页面
						pathUrl: "1",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/3-3.png",
						// 图片文字
						imgText: "小食",
						// 此区域点击跳转的页面
						pathUrl: "2",
					},
					{
						// 图片路径
						imgPath: "../../static/myIcon/3-2.png",
						// 图片文字
						imgText: "演出票",
						// 此区域点击跳转的页面
						pathUrl: "3",
					},
				],
			};
		},
		//监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
		onInit() {},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad() {},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		beforeDestroy() {},
		//页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
		onReachBottom() {},
		onShareAppMessage(res) {},
		created() {},
		methods: {
			// 跳转页面
			skipMethod(param) {
				console.log(param);
				switch (param) {
					case "我的客服":
						uni.navigateTo({
							url:"/pages/HM-chat/HM-chat"
						})
						break;
					case 2:
						console.log("有时，我可能脆弱得一句话就泪流满面，");
						break;
					case 3:
						console.log("有时，也发现自己咬着牙走了很长的路。");
						break;
					case 4:
						console.log("——莫泊桑 《一生》");
						break;
					case 5:
						console.log(
							"那像大西洋一样蔚蓝的眼睛，使我像泰坦尼克号般不受控制地沉溺其中"
						);
						break;
				}
			},
		},
	};
</script>